<template>
	<div class="content_main">
		<div class="content_title">
			<a @click="getChanPing(1,0)"
				:class="[{'caidan_a_check':candanIndex == 0},{'caidan_a':candanIndex !=0}]">最新</a>|
			<a @click="getChanPing(1,1)" :class="[{'caidan_a_check':candanIndex == 1},{'caidan_a':candanIndex !=1}]">
				注册单</a>|
			<a @click="getChanPing(1,2)"
				:class="[{'caidan_a_check':candanIndex == 2},{'caidan_a':candanIndex !=2}]">绑卡单</a>|
			<a @click="getChanPing(1,3)"
				:class="[{'caidan_a_check':candanIndex == 3},{'caidan_a':candanIndex !=3}]">实名认证</a>|
			<a @click="getChanPing(1,4)"
				:class="[{'caidan_a_check':candanIndex == 4},{'caidan_a':candanIndex !=4}]">立返</a>|

		</div>

		<view class="content_body">
			<template v-if="tj.length>0">
				<view v-for="cp in tj">

					<div class="content_body_title_tj">
						<span class="title_state">置顶</span>
						<text>{{cp.CHANPIN_APPMINGZI}}
						</text>
						<template v-if="getIsMySend(cp.CHANPIN_APPUSERID)">
							<text class="mySnd">(我发布的)</text>
						</template>
					</div>
					<div class="content_body_title_tj">
						<text>{{getContent(cp)}}</text>
					</div>
					<div class="content_body_title_tj">
						<text>推广要求: &nbsp</text> <text>{{cp.CHANPIN_BZ}}</text>
					</div>
					<div class="content_body_title_tj">
						<text>联系方式: &nbsp</text> <text> QQ{{cp.CHANPIN_QQHM}}</text>
					</div>
					<div class="content_body_user_tj">
						<div><span>作者：&nbsp{{cp.USER}}</span></div>
						<div><span>{{getTime(cp.CHANPIN_FBSJ)}}</span></div>
					</div>
				</view>
			</template>

			<view v-for="cp in datas">
				<view @click="showCpDetail(cp)">
					<div class="content_body_title">
						<div style="display: flex;flex-direction: row;">

							{{cp.CHANPIN_APPMINGZI}}

							<template v-if="getIsMySend(cp.CHANPIN_APPUSERID)">
								<text>(我发布的)</text>
							</template>
						</div>
						<template v-if="getIsMySend(cp.CHANPIN_APPUSERID)">
							<view class="zhiding">一键置顶</view>
						</template>

					</div>
					<div class="content_body_content">
						<text>{{getContent(cp)}}</text>
					</div>
					<div class="content_body_content">
						 <text>推广要求: &nbsp{{cp.CHANPIN_BZ}}</text>
					</div>
					<div class="content_body_content">
						<text>查看次数: &nbsp</text> <text>{{cp.chakan}} 次</text>
					</div>
					<div class="content_body_content">
						<text style="font-weight: bold; color: #000000;">联系方式: &nbsp</text> <text
							style="font-weight: bold; color: #000000;"><a>点击查看>></a></text>
					</div>
					<div class="content_body_user">
						<div><span>作者：&nbsp{{cp.USER}}</span></div>
						<div><span>{{getTime(cp.CHANPIN_FBSJ)}}</span></div>
					</div>
				</view>
			</view>

			<pageView ref="pageView"></pageView>


		</view>
	</div>
</template>

<script>
	import pageView from '../../views/PageView.vue'
	export default {
		components: {
			pageView
		},
		data() {
			return {
				candanIndex: 0,
				datas: [],
				tj: [],
				pageType:"homePage",

			}
		},
		props: {
			msg: String
		},
		created() {
			console.log("页面 created2222");
			//注册全局监听事件，搜索后更新界面数据 
			uni.$on('showSearchData', (res) => {
					this.search(res);
				}),
				uni.$on('updateView', (res) => {
					this.getChanPing(1);
				})
			uni.$on(this.pageType, (page) => {
				this.getChanPing(page);
			})
		},
		mounted() {
			console.log("页面 mounted");
			this.$refs.pageView.setType(this.pageType);
			this.$nextTick(() => {
				this.getChanPing(1, null);
			});

		},
		

		methods: {
			//是不是我自己发布的
			getIsMySend(uid) {
				if (this.$PublicData.getUserdata() != null) {
					var uid1 = this.$PublicData.getUserdata().uid;
					if (uid == uid1) {
						return true
					}
				}

				return false;
			},
			getContent(data) {
				return "平台: " + this.$Utils.getXt(data.CHANPIN_CZXT) + " 单价: " + data.CHANPIN_APPJIAGE + "元" + " 结算方式: " +
this.$Utils.getJsfs(data.CHANPIN_JSFS);
			},
			getTime(data) {
				return this.$Utils.getTimer(data);
			},
			async getChanPing(pageNum, type) {
				if (type == "" || type == null) {
					this.candanIndex = 0;
				} else {
					this.candanIndex = type;
				}
				try {
					const res = await this.$getData({
						url: this.$apis.getKindChanPings,
						data: {
							page: pageNum,
							cpType: this.candanIndex
						}
					})
					this.datas = res.data.data;
					if (res.data.tj != null) {
						this.tj = res.data.tj;
					}
					if (this.datas.length < 1 && this.tj.length < 1) {
						$Utils.showToast("没有数据");
					}
					uni.$emit('showNews', this.datas);

				} catch (e) {
					console.log("eee: ", e);
				}
			},

			async search(searchdata) {

				try {
					const res = await this.$getData({
						url: this.$apis.searchChanPing,
						data: {
							page: 1,
							keyWord: searchdata
						}
					})
					this.datas = res.data.data;
				} catch (e) {
					console.log("eee: ", e);
				}

			},
			async addck(id) {
				try {
					const res = await this.$postData({
						url: this.$apis.addCK,
						data: {
							CHANPIN_ID: id,
						}
					})
					console.log(res);

				} catch (e) {
					console.log("eee: ", e);

				}
			},
			//跳转到产品详情页面
			showCpDetail(cp) {
				this.addck(cp.CHANPIN_ID);
				uni.navigateTo({
					url: '../chanping/ChanpingDetail',
					success: function(res) {
						res.eventChannel.emit('setCp', cp)

					}
				})


			}



		}


	}
</script>
<style>
	a {
		text-decoration: none;
	}

	a:hover {
		background: #FF8C00;
		text-decoration: blink;
		color: #FFFFFF !important;
	}

	.caidan_a {
		margin-left: 1.525rem;
		margin-right: 1.525rem;
		font-size: 1.125rem;
		font-size: 0.9375rem;
		color: #333333;

	}

	.caidan_a_check {
		margin-left: 1.525rem;
		margin-right: 1.525rem;
		font-size: 1.925rem;
		font-size: 0.9375rem;
		color: #F99B15;

	}

	.content_main {
		flex-direction: column;
		display: flex;
		border: 1px solid #E5E5E5;
		height: 100%;
		border-radius: 0.1875rem;
		flex-grow: 56;
		box-sizing: border-box;
		margin-right: 5px;
		margin-top: 5px;
		border-bottom: none;
	}

	.content_title {
		font-size: 1.125rem;
		width: 100%;
		display: flex;
		height: 2.925rem;
		align-items: center;
		border-bottom: 1px solid #E5E5E5;

	}



	.content_title a:hover {
		color: #999999;
	}


	.first_tag {
		display: flex;
		color: #F99B15;
	}

	.title_state {
		justify-content: center;
		text-align: center;
		display: flex;
		width: 3.35rem;
		min-width: 3.25rem;
		height: 1.475rem;
		align-items: center;
		align-self: center;
		background: #F99B15;
		color: #F1F1F1;
		font-size: 0.9375rem;
		margin-right: 0.3125rem;
		border-radius: 0.2125rem;
	}


	.zhiding {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F99B15;
		padding: 5px;
		color: #FFFFFF;
		border-radius: 3px;

	}

	.content_body {
		word-wrap: break-word;
		overflow: hidden;
		padding: 0.625rem;
		display: flex;
		flex-direction: column;

	}

	.content_body_title_tj {
		margin-bottom: 5px;
		word-wrap: break-word;
		overflow: hidden;
		letter-spacing: 0.0825rem;
		color: #F99B15;
		font-weight: bold;
		display: flex;
		align-items: center;
		font-size: 16px;

	}

	.content_body_user_tj {
		padding-bottom: 0.3125rem;
		margin-bottom: 0.3125rem;
		border-bottom: 0.0625rem solid #E5E5E5;
		margin-top: 0.225rem;
		color: #F99B15;
		font-size: 0.9375rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content_body_title {
		word-wrap: break-word;
		overflow: hidden;
		letter-spacing: 0.0825rem;
		color: #F99B15;
		font-weight: bold;
		display: flex;
		align-items: center;
		font-size: 16px;
		justify-content: space-between;

	}

	.content_body_content {
		word-wrap: break-word;
		overflow: hidden;
		letter-spacing: 0.0625rem;
		margin-top: 0.2125rem;
		color: #000000;
		display: flex;
		
		
		font-size: 0.9375rem;
	}

	.content_body_user {
		padding-bottom: 0.3125rem;
		margin-bottom: 0.3125rem;
		border-bottom: 0.0625rem solid #E5E5E5;
		margin-top: 0.225rem;
		color: #999999;
		font-size: 0.9375rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer_page {
		margin-top: 10px;
		display: flex;
		justify-content: center;
	}

	.page_a {
		width: 60px;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 16px;
		color: #F99B15;
		border: 1px solid #E5E5E5;
		border-right: none;
	}

	.page_a_click {
		width: 60px;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 16px;
		border: 1px solid #E5E5E5;
		border-right: none;
		background: #F99B15;
		color: #FFFFFF;
	}

	.page_end {
		width: 60px;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 16px;
		color: #F99B15;
		border: 1px solid #E5E5E5;

	}

	.footer_page a:hover,
	.footer_page_on {
		background: #F99B15;
		color: #FFFFFF;
	}

	.click_a {
		background: #F99B15;
		color: #FFFFFF;
	}
</style>
